<template>
  <el-container>
    <el-aside>
      <Sidebar />
    </el-aside>
    <el-main>
      <Header />
      <div class="main-body" :class="hasPlayBar ? 'main-height2' : 'main-height1'">
        <el-scrollbar>
          <router-view v-slot="{ Component }">
            <keep-alive>
              <component :is="Component" />
            </keep-alive>
          </router-view>
        </el-scrollbar>
      </div>
    </el-main>
    <Login v-show="loginDialogVisible" />
    <play-bar></play-bar>
    <message-drawer ref="messageDrawerRef" />
  </el-container>
</template>
<script setup lang="ts">
import { useUserStore } from '@/store/UserStore'
import { usePlayStore } from '@/store/PlayStore'
import { computed, onMounted, ref, provide } from 'vue'
import MessageDrawer from './components/HeaderBar/MessageDrawer.vue'
import emitter from './store/emitter'

const userStore = useUserStore()
const playStore = usePlayStore()
const loginDialogVisible = computed(() => userStore.loginDialogVisible)
const hasPlayBar = computed(()=>{
  return playStore.playList.length>0
})
//初始化主题
onMounted(()=>{
  document.documentElement.className = userStore.currentTheme;
})

const messageDrawerRef = ref()

// 监听消息面板的打开/关闭事件
emitter.on('toggleMessagePanel', () => {
  messageDrawerRef.value?.show()
})

// 点击其他区域关闭消息面板
const handleClickOutside = (event: MouseEvent) => {
  const target = event.target as HTMLElement
  if (!target.closest('.message-panel') && 
      !target.closest('.message-trigger')) {
    messageDrawerRef.value?.hide()
  }
}

// 添加全局点击事件监听
document.addEventListener('click', handleClickOutside)
</script>
<style lang="scss">
body {
  --el-aside-width: 200px;
  border-radius: 50px;
  background-color: var(--el-bg-color-page);
  margin: 0;
  font-family: QingningYyt;
  .el-container .el-main {
    --el-main-padding: 0;
  }
  ul {
    padding-inline-start: 0;
  }
  --el-border-color-light: transparent;
  .el-table{
    --el-border-color-lighter: transparent;
  }
}
.main-body {
  overflow-y: auto;
  color:var(--color);
  :deep(.el-scrollbar__wrap){
    height: 100%;
  }
}
.main-height1{
  height: calc(100vh - 90px);
}
.main-height2{
  height: calc(100vh - 170px);
}
</style>
